<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <title></title>


</head>
<body class="hold-transition skin-blue sidebar-mini">
<div th:fragment="data" class="data">
    <style>

        .data {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .data i {
            font-style: normal;
        }
        .data .table>tbody>tr>td,
        .data .table>tbody>tr>th,
        .data .table>tfoot>tr>td,
        .data .table>tfoot>tr>th,
        .data .table>thead>tr>td,
        .data .table>thead>tr>th {
            padding: 8px 3px;
        }
        .data .dataHoverStyle:hover{
            background-color: #0d9ba0;
        }
        .data .top {
            font-size: 32px;
            text-align: center;
            width: 100%;
            height: 13%;
            background: url(/public/images/data/img-top.png) no-repeat;
            background-size: 100%;
            line-height: 83px;
            letter-spacing: 10px;
            color: #00ffff;
        }

        .data .left {
            padding-left: 15px;
            height: 87%;
            width: 24%;
            float: left;
        }

        .data .sevenAlarm,
        .data .speed,
        .data .currentAllowance {
            width: 100%;
            height: 32%;
        }

        .data .sevenAlarm span {
            height: 30px;
            width: 100%;
            font-size: 20px;
            color: #00ffff;
            position: absolute;
            top: -10px;
            left: 45px;
        }

        .data .sevenAlarmCharts {
            width: 100%;
            height: 100%;
            background: url(/public/images/data/sevenAlarmCase.png) no-repeat;
            /* margin-top: 15px; */
            margin-top: 2%;
            position: relative;
            /* padding-top: 30px; */
        }

        .data .speedCharts,
        .data .currentAllowanceCharts {
            width: 100%;
            height: 100%;
            background: url(/public/images/data/speed.png) no-repeat;
            margin-top: 2%;
            position: relative;

        }

        /*假的图表*/
        .data .currentAllowanceCharts {
            padding: 22px;
        }

        .data #currentAllowanceCanvas {
            background: url(/public/images/data/currentAllowanceBox.png) no-repeat;
        }

        .pt30 {
            padding-top: 30px;
            box-sizing: border-box;
        }

        .data .speedCharts p,
        .data .currentAllowanceCharts p {
            height: 8%;
            position: absolute;
            top: 20px;
            font-size: 18px;
            left: 20px;
            color: #fff;
        }

        .data .speedCharts p span {
            font-size: 12px;
            margin-left: 4px;
            color: #00ffff;
        }

        /*content*/
        .data .content {
            float: left;
            width: 49%;
            height: 87%;
        }

        .data .c-top {
            height: 25%;
            width: 100%;
            /* border-bottom: 1px solid #ccc; */
        }

        .data .sevenDataText span {
            font-size: 20px;
            color: #00ffff;
            position: absolute;
            top: -10px;
            left: 45px;
        }

        .data .sevenDataText {
            height: 30%;
            width: 100%;
            background: url(/public/images/data/sevenAlarm.png) no-repeat;
            position: relative;
        }

        .data .sevenDataBtnBox {
            position: absolute;
            top: 0px;
            right: 0;
            right: 30px;
        }

        .data .sevenDataBtnBox li {
            float: left;
            width: 60px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            margin: 0 10px;
            background-color: #1f333d;
            color: #999;
            border-radius: 10px;
            cursor: pointer;
        }

        .data .sevenDataBtnBox li.active {
            background-color: #48818d;
            color: #fff;
        }

        .data .sevenDataDev,
        .data .sevenDataAlarm,
        .data .sevenDataUntreated {
            width: 33.33%;
            height: 60%;
            color: #fff;
            font-size: 16px;
        }

        .data .sevenDataDev {

        }

        .data .evenDataAlarm {

        }

        .data .sevenDataUntreated {

        }

        .data .content .sevenDataNumBg {
            width: 118px;
            height: 122px;
            background: url(/public/images/data/sevenData.png) no-repeat;
            text-align: center;
            line-height: 122px;
            color: #fdff4a;
        }

        .data .content .sevenDataNumBg i {
            font-style: normal;
            font-size: 20px;
        }

        .data .content .sevenDataNumBg span {
            margin-left: 6px;
            font-size: 12px;
            -webkit-transform: scale(0.90);
        }

        .data .sevenDataNumCenter {
            margin: 0 auto;
            width: 182px;
            height: 132px;
            cursor: pointer;
        }

        .data .c-center {
            width: 100%;
            /* height: 420px; */
            height: 40%;
            position: relative;
            margin-top: 1%;
        }

        .data .c-center #hotMap {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        /*baidu map logo*/
        .anchorBL {
            display: none;
        }

        /*报警来源和报警原因图表*/
        .data .c-bottom {
            width: 100%;
            height: 33%;
            margin-top: 2%;
        }

        .data .alarmSource,
        .data .alarmCause {
            width: 48%;
            height: 100%;
            margin: 0 1%;
            background: url(/public/images/data/alarmsource.png) no-repeat;
            float: left;
            cursor: pointer;
            background-size: cover;
        }

        .data .alarmSource canvas,
        .data .alarmCause canvas,
        .data .sevenAlarm canvas{
            cursor: pointer;
        }

        /*right*/
        .data .right {
            float: right;
            width: 27%;
            height: 87%;
        }

        .data .focus,
        .data .earlyAlarm,
        .data .notice {
            width: 100%;
            height: 32%;
            margin-top: 2%;
        }

        .data .earlyAlarm {
            padding-left: 22px;
            padding-top: 60px;
            position: relative;
            background: url(/public/images/data/sevenFocus.png) no-repeat;
        }

        .data .focus {
            padding-top: 8%;
            box-sizing: border-box;
            background: url(/public/images/data/sevenFocus.png) no-repeat;

        }

        .data .earlyAlarm {

        }

        .data .notice {
            background: url(/public/images/data/noticeBox.png) no-repeat;
            background-size: cover;
        }

        .data .right .focus {
            position: relative;
        }

        .data .right .focus span {
            height: 30px;
            width: 100%;
            font-size: 20px;
            color: #00ffff;
            position: absolute;
            top: -10px;
            left: 45px;
        }

        /*三色预警*/
        .data .earlyWarningColor .table {
            width: 300px;
            height: 180px;
            overflow-y: auto;
            margin-top: 10px;
        }

        .data .earlyWarningColor {
            width: 280px;
            overflow: hidden;
        }

        .data .earlyWarningColorHid {
            width: 300px;
            height: 220px;
            overflow: hidden;
        }

        .data .item {
            width: 127px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            cursor: pointer;
        }

        .data .table p {
            letter-spacing: 2px;
        }

        .data .list {
            height: 190px;
            width: 320px;
            position: absolute;
            top: 0;
            left: 166px;
        }

        .data .listBox {
            position: relative;
            width: 490px;
            height: 220px;
            background: url(/public/images/middleDanger.png) no-repeat;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        /*弹出模态框*/
        .data .alarmSourceModal {
            width: 701px;
            height: 828px;
            background: url(/public/images/data/alarmModalBG.png) no-repeat;
            position: absolute;
            left: 50%;
            margin-left: -350px;
            top: 50%;
            margin-top: -414px;
        }

        .data .alarmSourceModal-top {
            width: 100%;
            height: 71px;
            position: relative;
        }

        .data .alarmSourceModal-dataBox {
            position: absolute;
            bottom: -110px;
            left: 30px;
            cursor: pointer;
            z-index: 100;
            width: 60px;
            height: 115px;
        }

        .data .alarmSourceModal-data {
            background: #0d9ba0;
            color: #fff;
            border: none;
            width: 60px;
            height: 25px;
            border-radius: 5px;
            text-align: center;
            line-height: 25px;
            list-style-type: none;
        }

        .data ul,
        .data ul li {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }

        .data .alarmSourceModal-dataBox ul li {
            background-color: #165c63;
            width: 100%;
            color: #fff;
            border: none;
            height: 30px;
            text-align: center;
            line-height: 30px;
            list-style-type: none;
        }

        .data .alarmSourceModal-dataBox ul li:nth-child(3) {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;

        }

        .data .alarmSourceModal-dataBox ul {
            width: 50px;
            height: 90px;
            margin-left: 5px;
            display: none;
        }

        .data .alarmSourceModal-title {
            width: 301px;
            height: 71px;
            margin: 0 auto;
            background: url(/public/images/data/alarmSourceModal-title.png) no-repeat;
            font-size: 28px;
            color: #00ffff;
            text-align: center;
            line-height: 71px;
            position: absolute;
            left: 50%;
            top: 0;
            margin-left: -150px;
        }

        .data .alarmSourceModal-close {
            width: 38px;
            height: 38px;
            background: url(/public/images/data/alarmSourceModal-close.png) no-repeat;
            float: right;
            margin: 20px;
            cursor: pointer;
        }

        .data .alarmSourceModal-Charts {
            height: 273px;
            width: 100%;
        }

        .data #alarmSourceCanva1,
        .data #alarmCauseCanva1 {
            float: left;

        }

        .data .alarmSourceModal-ChartsList {
            height: 100%;
            width: 310px;
            float: right;
        }

        .data .alarmSourceModal-ChartsList ul {
            padding-left: 30px;
            padding-top: 30px;
            box-sizing: border-box;

        }

        .data .alarmSourceModal-ChartsList ul li {
            line-height: 42px;
        }

        .data .alarmSourceModal-ChartsList ul li span:nth-child(1) {
            font-size: 16px;
            color: #fff;
            width: 72px;
            height: 100%;
            line-height: 100%;
            display: inline-block;
        }

        .data .alarmSourceModal-ChartsList ul li span:nth-child(2) {
            font-size: 18px;
            color: #fff;
            width: 80px;
            display: inline-block;
            text-align: center;
        }

        .data .alarmSourceModal-ChartsList ul li span:nth-child(3) {
            font-size: 12px;
            color: #73e673;
            display: inline-block;
            width: 80px;
            text-align: center;
        }

        .data .alarmSourceModal-ChartsList ul li span:nth-child(3) span {
            font-size: 12px;
            color: #73e673;
            display: inline-block;
            transform: scale(0.6);
            width: 10px;
        }

        .data .alarmSourceModal-ChartsList ul li span:nth-child(3) i {
            font-size: 12px;
            color: #73e673;
            display: inline-block;
            transform: scale(0.8);
            font-style: normal;
        }

        .data .alarmPlaceBtnBox ul {
            height: 50px;
            width: 100%;
            padding-top: 15px;
            box-sizing: border-box;
        }

        .data .alarmPlaceBtnBox ul li {
            font-size: 12px;
            width: 66px;
            height: 20px;
            border-radius: 10px;
            margin-left: 10px;
            line-height: 20px;
            float: left;
            background-color: #a0a0a0;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .data .alarmPlaceBtnBox ul li.active {
            border: 2px solid #fff;
            height: 24px;
            border-radius: 12px;
            margin-top: -2px;
        }

        .data .alarmPlaceBtnBox ul li:nth-child(1) {
            margin-left: 30px;
        }

        .data .alarmPlaceBtnBox ul li:nth-child(2) {
            background-color: #2b80b9;
        }

        .data .alarmPlaceBtnBox ul li:nth-child(3) {
            background-color: #169d96;
        }

        .data .alarmPlaceBtnBox ul li:nth-child(4) {
            background-color: #ef6b56;
        }

        .data .alarmPlaceBtnBox ul li:nth-child(5) {
            background-color: #7e4a49;

        }

        .data .alarmPlaceListBox table {
            width: 660px;
            /*height: 350px;*/
            margin: 0 auto;
        }

        .data .alarmPlaceListBox thead {
            background-color: #107e84;
        }

        .data .alarmPlaceListBox thead tr {
            height: 38px;
        }

        .data .alarmPlaceListBox thead th,
        .data .alarmPlaceListBox tbody td {
            text-align: center;
            height: 38px;
        }

        .data .alarmPlaceListBox tbody {
            background-color: #155d65;
        }

        .data .alarmPlaceListPage {
            /*padding-left: 46px;*/
            /*padding-top: 15px;*/
            width: 650px;
            margin: 0 auto;
            position: absolute;
            bottom: 25px;
            left: 50%;
            margin-left: -325px;
        }

        .data .alarmPlaceListPage .pagination {
            float: left;
        }

        .data .alarmPlaceListPage .pageJump {
            float: right;
        }

        /*     	.data .alarmPlaceListPage ul li a{
                    background-color: rgba(0,0,0,0);
                    color:#fff;
                } */
        /*         .data .alarmPlaceListPage ul li a{
                    background-color: rgba(0,0,0,0);
                    color: #fff;
                    border: none;
                } */
        .data .alarmPlaceListPage .pageJump {
            margin: 0;
            padding-left: 15px;

        }

        .data .alarmPlaceListPage .pageJump input {
            width: 40px;
            background-color: rgba(0, 0, 0, 0);
            height: 30px;
            padding: 6px 3px;
            color: #fff;
        }

        .data .alarmPlaceListPage .pageJump button {
            background-color: rgba(0, 0, 0, 0);
            height: 30px;
            color: #fff;
            line-height: 30px;
            padding: 0 12px;
        }

        .data .alarmPlaceListPage .selected {
            background: #155d65;
        }
/*虚线*/
        .data .dashedWide{
            width: 100%;
            height: 1px;
            background-image: linear-gradient(to right, #107e84 0%, #ccc 50%, transparent 50%);
            background-size: 8px 1px;
            background-repeat: repeat-x;
        }
    </style>
    <div class="top">
        南星街道智慧消防平台
        <div class="statisticsClose"></div>
    </div>
    <div class="left">
        <div class="sevenAlarm">
            <div class="sevenAlarmCharts pt30">
                <span>七日报警统计</span>

                <div id="sevenAlarmCanvas" style="width:90%;height:100%;margin: 0 auto;"></div>

            </div>
        </div>
        <div class="speed">
            <div class="speedCharts">
                <p>响应速度 <span>7月</span></p>

                <div id="speedCanvas"
                     style="width:90%;height:100%;margin: 0 auto;padding-top: 8%;box-sizing: border-box;"></div>

            </div>
        </div>
        <div class="currentAllowance">
            <div class="currentAllowanceCharts">
                <div id="currentAllowanceCanvas" style="width:100%;height:100%;margin: 0 auto;"></div>

            </div>
        </div>
    </div>
    <div class="content">
        <div class="c-top">
            <div class="sevenDataText">
                <span>数据统计</span>

                <div class="sevenDataBtnBox">
                    <ul>
                        <li class="active">本周</li>
                        <li>本月</li>
                        <li>本季</li>
                    </ul>
                </div>
            </div>
            <div class="fl sevenDataDev" id="">
                <div class="sevenDataNumCenter">
                    <span class="fl">设备总数</span>

                    <div class="fl devSum sevenDataNumBg"><i class="sumSmoke1"></i><span>个</span></div>
                    <!--<span></span>-->
                </div>

            </div>
            <div class="fl sevenDataAlarm">
                <div class="sevenDataNumCenter">
                    <span class="fl">报警总数</span>

                    <div class="fl alarmSum sevenDataNumBg"><i></i><span>条</span></div>
                </div>

            </div>
            <div class="fl sevenDataUntreated">
                <div class="sevenDataNumCenter">
                    <span class="fl">未处理数</span>

                    <div class="fl untreatedSum sevenDataNumBg"><i class="dataHandleNum1"></i><span>条</span></div>
                </div>
            </div>
        </div>
        <div class="c-center">
            <div id="hotMap"></div>
        </div>
        <div class="c-bottom">
            <div class="alarmSource" id="alarmSource">
                <div id="alarmSourceCanva" style="width:100%;height:100%;margin: 0 auto;"></div>

            </div>
            <div class="alarmCause" id="alarmCause" data-toggle="modal" data-target="#alarmCauseModaBox">
                <div id="alarmCauseCanvas" style="width:100%;height:100%;margin: 0 auto;"></div>

            </div>
        </div>
    </div>
    <div class="right">
        <div class="focus">
            <span>七日重点关注对象</span>

            <div id="sevenFocusCanvas" style="width: 90%;height:100%;margin: 0 auto;"></div>

        </div>
        <div class="earlyAlarm">
            <div class="listBox">
                <div class="item item0" style="font-size: 16px;color: #7eff71;">一般火险场所</div>
                <div class="item item1" style="font-size: 16px;color: #e4ba23;">较大火险场所</div>
                <div class="item item2" style="font-size: 16px;color: #e65056;">高危火险场所</div>
                <div class="list list0">
                    <div class="earlyWarningColor">
                        <div class="earlyWarningColorHid">
                            <div class="table">
                                <!-- <p>1.万松岭路55号快餐店</p> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list list1" style="display:none;">
                    <div class="earlyWarningColor">
                        <div class="earlyWarningColorHid">
                            <div class="table">
                                <!-- <p>1.笤帚湾路64号一帅酒家</p> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list list2" style="display:none;">
                    <div class="earlyWarningColor">
                        <div class="earlyWarningColorHid">
                            <div class="table">
                                <!-- <p>1.万松岭路63号杭盛综合</p> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="notice">通知</div>
    </div>

    <!-- 报警来源弹出层 -->
    <div class="modal fade hisSearchModalStyle" id="alarmSourceModalBox" style="display: none;">
        <div class="alarmSourceModal" id="alarmSourceModal">
            <div class="alarmSourceModal-top">
                <div class="alarmSourceModal-dataBox" id="alarmSourceModal-dataBox">
                    <div class="alarmSourceModal-data" id="alarmSourceModal-data"><span class="alarmSourceModal-week"
                                                                                        id="alarmSourceModal-week">本周</span> <span
                            class="glyphicon glyphicon-triangle-bottom"></span></div>
                    <ul>
                        <li class="dataHoverStyle" mydata="week"><span>本周</span></li>
                        <li class="dataHoverStyle" mydata="month"><span>本月</span></li>
                        <li class="dataHoverStyle" mydata="quarter"><span>本季</span></li>
                    </ul>
                </div>

                <div class="alarmSourceModal-title">报警来源</div>
                <div class="alarmSourceModal-close" id="alarmSourceModal-close"></div>
            </div>
            <div class="alarmSourceModal-Charts">
                <div id="alarmSourceCanva1" style="width: 390px;height: 273px;"></div>
                <div class="alarmSourceModal-ChartsList" id="alarmSourceModal-ChartsList">
                    <ul>
                        <li>
                            <span><i class="fl">报警总数</i><i class="fr">:</i></span>
                            <span class="dataSmokeSum1"></span>
                            <span>同比 <span class="glyphicon glyphicon-triangle-bottom"></span><i>12%</i></span>
                        </li>
                        <li>
                            <span><i class="fl">出租房</i><i class="fr">:</i></span>
                            <span>100</span>
                            <span>同比 <span class="glyphicon glyphicon-triangle-bottom"></span><i>12%</i></span>
                        </li>
                        <li>
                            <span><i class="fl">居民房</i><i class="fr">:</i></span>
                            <span>100</span>
                            <span>同比 <span class="glyphicon glyphicon-triangle-bottom"></span><i>12%</i></span>
                        </li>
                        <li>
                            <span><i class="fl">公共区域</i><i class="fr">:</i></span>
                            <span>100</span>
                            <span>同比 <span class="glyphicon glyphicon-triangle-bottom"></span><i>12%</i></span>
                        </li>
                        <li>
                            <span><i class="fl">经营场所</i><i class="fr">:</i></span>
                            <span>100</span>
                            <span>同比 <span class="glyphicon glyphicon-triangle-bottom"></span><i>12%</i></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="alarmPlaceBtnBox" id="alarmSourceBtnBox">
                <div class="dashedWide"></div>
                <ul>
                    <li class="active">全部</li>
                    <li>出租房</li>
                    <li>居民房</li>
                    <li>公共区域</li>
                    <li>经营场所</li>
                </ul>
            </div>
            <div class="alarmPlaceListBox" id="alarmSourceListBox">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>设备名称</th>
                        <th>安装地址</th>
                        <th>报警来源</th>
                        <th>开始时间</th>
                        <th>负责人/联系方式</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div class="alarmPlaceListPage">
                    <ul class="pagination" id="alarmPlacePage"></ul>
                    <div class="pageJump">
                        <span>跳转到</span>
                        <input type="text"/>
                        <span>页</span>
                        <button type="button" class="button">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ------------报警原因弹出层--------------------- -->   <div class="modal fade hisSearchModalStyle" id="alarmCauseModalBox" style="display: none;">
    <div class="alarmSourceModal" id="alarmCauseModal">
        <div class="alarmSourceModal-top">
            <div class="alarmSourceModal-dataBox" id="alarmCauseModal-dataBox">
                <div class="alarmSourceModal-data" id="alarmCauseModal-data"><span class="alarmSourceModal-week"
                                                                                   id="alarmCauseModal-week">本周</span> <span
                        class="glyphicon glyphicon-triangle-bottom"></span></div>
                <ul>
                    <li class="dataHoverStyle" mydata="week"><span>本周</span></li>
                    <li class="dataHoverStyle" mydata="month"><span>本月</span></li>
                    <li class="dataHoverStyle" mydata="quarter"><span>本季</span></li>
                </ul>
            </div>

            <div class="alarmSourceModal-title">报警原因</div>
            <div class="alarmSourceModal-close" id="alarmCauseModal-close"></div>
        </div>
        <div class="alarmSourceModal-Charts">
            <div id="alarmCauseCanva1" style="width: 390px;height: 273px;"></div>
            <div class="alarmSourceModal-ChartsList" id="alarmCauseModal-ChartsList">
                <ul style="padding-top: 0;">
                    <li>
                        <span><i class="fl">报警总数</i><i class="fr">:</i></span>
                        <span class="dataSmokeSum1"></span>
                        <span>同比 <span class="glyphicon glyphicon-triangle-bottom"></span><i>12%</i></span>
                    </li>
                    <li>
                        <span><i class="fl">炊烟</i><i class="fr">:</i></span>
                        <span>100</span>
                        <span>同比 <span class="glyphicon glyphicon-triangle-bottom"></span><i>12%</i></span>
                    </li>
                    <li>
                        <span><i class="fl">吸烟</i><i class="fr">:</i></span>
                        <span>100</span>
                        <span>同比 <span class="glyphicon glyphicon-triangle-bottom"></span><i>12%</i></span>
                    </li>
                    <li>
                        <span><i class="fl">粉尘</i><i class="fr">:</i></span>
                        <span>100</span>
                        <span>同比 <span class="glyphicon glyphicon-triangle-bottom"></span><i>12%</i></span>
                    </li>
                    <li>
                        <span><i class="fl">火警</i><i class="fr">:</i></span>
                        <span>100</span>
                        <span>同比 <span class="glyphicon glyphicon-triangle-bottom"></span><i>12%</i></span>
                    </li>
                    <li>
                        <span><i class="fl">其他</i><i class="fr">:</i></span>
                        <span>100</span>
                        <span>同比 <span class="glyphicon glyphicon-triangle-bottom"></span><i>12%</i></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="alarmPlaceBtnBox" id="alarmCauseBtnBox">
            <div class="dashedWide"></div>
            <ul>
                <li class="active">全部</li>
                <li>炊烟</li>
                <li>吸烟</li>
                <li>粉尘</li>
                <li>火警</li>
                <li>其他</li>
            </ul>
        </div>
        <div class="alarmPlaceListBox">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>设备名称</th>
                    <th>安装地址</th>
                    <th>报警原因</th>
                    <th>开始时间</th>
                    <th>负责人/联系方式</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <div class="alarmPlaceListPage">
                <ul class="pagination" id="alarmCausePage"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button">确定</button>
                </div>
            </div>
        </div>

        <div style="display:none;">
            <!--七日报警统计-->
            <div id="dataFocus" style="width: 360px;height:340px;position:absolute;top: 595px;left: 64px;"></div>

        </div>
    </div>
</div>


    <!-- 七日报警统计弹出层-->
    <div class="modal fade hisSearchModalStyle" id="alarmStatisticsModalBox" style="display: none;">
        <div class="alarmSourceModal" id="alarmStatisticsModal">
            <div class="alarmSourceModal-top">
                <div class="alarmSourceModal-dataBox" id="alarmStatisticsModal-dataBox">
                    <div class="alarmSourceModal-data" id="alarmStatisticsModal-data"><span
                            class="alarmSourceModal-week"
                            id="alarmStatisticsModal-week">本周</span> <span
                            class="glyphicon glyphicon-triangle-bottom"></span></div>
                    <ul>
                        <li class="dataHoverStyle" mydata="week"><span>本周</span></li>
                        <li class="dataHoverStyle" mydata="month"><span>本月</span></li>
                        <li class="dataHoverStyle" mydata="quarter"><span>本季</span></li>
                    </ul>
                </div>

                <div class="alarmSourceModal-title">报警统计</div>
                <div class="alarmSourceModal-close" id="alarmStatisticsModal-close"></div>
            </div>
            <div class="alarmSourceModal-Charts">
                <div id="alarmStatisticsCanva1" style="width: 680px;height: 260px;"></div>
            </div>
            <div class="alarmPlaceBtnBox" id="alarmStatisticsBtnBox">
                <div class="dashedWide"></div>
                <ul>
                    <!--<li class="active">全部</li>-->
                    <!--<li>出租房</li>-->
                    <!--<li>居民房</li>-->
                    <!--<li>公共区域</li>-->
                    <!--<li>经营场所</li>-->
                </ul>
            </div>
            <div class="alarmPlaceListBox" id="alarmStatisticsListBox">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>设备名称</th>
                        <th>安装地址</th>
                        <th>报警时间</th>
                        <th>负责人/联系方式</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div class="alarmPlaceListPage">
                    <ul class="pagination" id="alarmStatisticsPage"></ul>
                    <div class="pageJump">
                        <span>跳转到</span>
                        <input type="text"/>
                        <span>页</span>
                        <button type="button" class="button">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--数据统计 设备总数弹出层-->
    <div class="modal fade hisSearchModalStyle" id="deviceModalBox" style="display: none;">
        <div class="alarmSourceModal" id="deviceModal">
            <div class="alarmSourceModal-top">

                <div class="alarmSourceModal-title">设备总数</div>
                <div class="alarmSourceModal-close deviceModal-close"></div>
            </div>
            <div class="alarmPlaceBtnBox" id="deviceBtnBox">
            </div>
            <div class="alarmPlaceListBox">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>设备类型</th>
                        <th>安装地址</th>
                        <th>安装日期</th>
                        <th>联系人/联系方式</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div class="alarmPlaceListPage">
                    <ul class="pagination" id="devicePage"></ul>
                    <div class="pageJump">
                        <span>跳转到</span>
                        <input type="text"/>
                        <span>页</span>
                        <button type="button" class="button">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--数据统计 报警总数弹出层-->
    <div class="modal fade hisSearchModalStyle" id="alarmSumModalBox" style="display: none;">
        <div class="alarmSourceModal" id="alarmSumModal">
            <div class="alarmSourceModal-top">

                <div class="alarmSourceModal-title">报警总数</div>
                <div class="alarmSourceModal-close deviceModal-close"></div>
            </div>
            <div class="alarmPlaceBtnBox" id="alarmSumBtnBox">
            </div>
            <div class="alarmPlaceListBox">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>设备类型</th>
                        <th>安装地址</th>
                        <th>报警时间</th>
                        <th>联系人/联系方式</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div class="alarmPlaceListPage">
                    <ul class="pagination" id="alarmSumPage"></ul>
                    <div class="pageJump">
                        <span>跳转到</span>
                        <input type="text"/>
                        <span>页</span>
                        <button type="button" class="button">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--数据统计 报警总数弹出层-->
    <div class="modal fade hisSearchModalStyle" id="untreatedDataModalBox" style="display: none;">
        <div class="alarmSourceModal" id="untreatedDataModal">
            <div class="alarmSourceModal-top">

                <div class="alarmSourceModal-title">未处理数</div>
                <div class="alarmSourceModal-close deviceModal-close"></div>
            </div>
            <div class="alarmPlaceBtnBox" id="untreatedDataBtnBox">
            </div>
            <div class="alarmPlaceListBox">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>设备类型</th>
                        <th>安装地址</th>
                        <th>报警时间</th>
                        <th>联系人/联系方式</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div class="alarmPlaceListPage">
                    <ul class="pagination" id="untreatedDataPage"></ul>
                    <div class="pageJump">
                        <span>跳转到</span>
                        <input type="text"/>
                        <span>页</span>
                        <button type="button" class="button">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 响应速度弹出层-->
    <!--<div class="modal fade hisSearchModalStyle" id="alarmSpeedModalBox" style="display: none;">-->
        <!--<div class="alarmSourceModal" id="alarmSpeedModal">-->
            <!--<div class="alarmSourceModal-top">-->
                <!--<div class="alarmSourceModal-dataBox" id="alarmSpeedModal-dataBox">-->
                    <!--<div class="alarmSourceModal-data" id="alarmSpeedModal-data"><span class="alarmSourceModal-week"-->
                                                                                       <!--id="alarmSpeedModal-week">本周</span> <span-->
                            <!--class="glyphicon glyphicon-triangle-bottom"></span></div>-->
                    <!--<ul>-->
                        <!--<li class="dataHoverStyle" mydata="week"><span>本周</span></li>-->
                        <!--<li class="dataHoverStyle" mydata="month"><span>本月</span></li>-->
                        <!--<li class="dataHoverStyle" mydata="quarter"><span>本季</span></li>-->
                    <!--</ul>-->
                <!--</div>-->

                <!--<div class="alarmSourceModal-title">响应速度</div>-->
                <!--<div class="alarmSourceModal-close" id="alarmSpeedModal-close"></div>-->
            <!--</div>-->
            <!--<div class="alarmSourceModal-Charts">-->
                <!--<div id="alarmSpeedCanva1" style="width: 390px;height: 273px;"></div>-->
            <!--</div>-->
            <!--<div class="alarmPlaceBtnBox" id="alarmSpeedBtnBox">-->
                <!--<ul>-->
                    <!--<li class="active">全部</li>-->
                    <!--<li>出租房</li>-->
                    <!--<li>居民房</li>-->
                    <!--<li>公共区域</li>-->
                    <!--<li>经营场所</li>-->
                <!--</ul>-->
            <!--</div>-->
            <!--<div class="alarmPlaceListBox" id="alarmSpeedListBox">-->
                <!--<table class="table table-bordered">-->
                    <!--<thead>-->
                    <!--<tr>-->
                        <!--<th>序号</th>-->
                        <!--<th>设备名称</th>-->
                        <!--<th>地址</th>-->
                        <!--<th>类型</th>-->
                        <!--<th>负责人/联系方式</th>-->
                    <!--</tr>-->
                    <!--</thead>-->
                    <!--<tbody>-->
                    <!--<tr>-->
                        <!--<td>1</td>-->
                        <!--<td>2</td>-->
                        <!--<td>3</td>-->
                        <!--<td>4</td>-->
                        <!--<td>5</td>-->
                    <!--</tr>-->


                    <!--</tbody>-->
                <!--</table>-->
                <!--<div class="alarmPlaceListPage">-->
                    <!--<ul class="pagination" id="alarmSpeedPage"></ul>-->
                    <!--<div class="pageJump">-->
                        <!--<span>跳转到</span>-->
                        <!--<input type="text"/>-->
                        <!--<span>页</span>-->
                        <!--<button type="button" class="button">确定</button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->



    <script src="/system/data.js"></script>
</div>
</body>
</html>
